angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？

小课堂【北京第146期】

分享人：李仁

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.拓展思考

7.参考文献

8.更多讨论

1.背景介绍

什么事表单验证

表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

2.知识剖析

常见的表单验证有哪些

比如登陆页面的账号和密码，我们可以限制账号和密码的长度，可以限制他不可以为空

比如我们在某些平台实名认证的时候，姓名，身份证号，手机号必填

3.常见问题

如何实现表单验证呢？

4.解决方案

h5自带表单验证

jQuery的表单验证

angular表单验证

angular表单验证中的ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的

ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。

AngularJS 中的 ng-blur 指令不会覆盖原生的 onblur 事件， 如果触发该事件，ng-blur 表达式与原生的 onblur 事件都会执行。

ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。

ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时，ng-focus 表达式与原始的 onfocus 事件将都会执行。

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作

ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

5.参考文献

6..更多讨论

还有哪些表单验证的方式？

鸣谢

感谢大家观看

BY : 景鑫 || 李仁